<template>
  <section id="skills" class="section">
    <div class="container-full">
      <h2 class="section-title fade-in">技能栈</h2>
      <div class="skills-grid">
        <div
          v-for="(category, index) in skillCategories"
          :key="category.name"
          class="skill-card card"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <h3 class="skill-card-title">{{ category.name }}</h3>
          <div class="skill-items">
            <div
              v-for="skill in category.items"
              :key="skill.name"
              class="skill-item"
              @mouseenter="showSkillDetail(skill)"
              @mouseleave="hideSkillDetail"
            >
              <div class="skill-info">
                <span class="skill-name">{{ skill.name }}</span>
                <span class="skill-level">{{ skill.level }}%</span>
              </div>
              <div class="skill-bar">
                <div
                  class="skill-progress"
                  :style="{ width: animatedLevels[skill.name] || 0 + '%' }"
                ></div>
              </div>
              <div v-if="activeSkill === skill" class="skill-detail">
                {{ skill.description }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tech-cloud-section card">
        <h3 class="tech-cloud-title">技术标签云</h3>
        <div class="tech-cloud">
          <span
            v-for="(tech, index) in techTags"
            :key="tech.name"
            class="tech-tag"
            :style="{
              fontSize: tech.size + 'rem',
              animationDelay: `${index * 0.05}s`
            }"
          >
            {{ tech.name }}
          </span>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'

const activeSkill = ref(null)
const animatedLevels = reactive({})

const skillCategories = [
  {
    name: '前端开发',
    items: [
      { name: 'Vue.js', level: 95, description: '深度理解Vue 3生态，包括Composition API、Pinia状态管理等' },
      { name: 'React', level: 90, description: '精通React Hooks、Redux、Next.js等' },
      { name: 'TypeScript', level: 88, description: '熟练使用TS进行大型项目开发' },
      { name: 'JavaScript', level: 92, description: 'ES6+语法熟练，熟悉异步编程和模块化' }
    ]
  },
  {
    name: '后端与工具',
    items: [
      { name: 'Node.js', level: 85, description: '使用Express、Koa构建RESTful API' },
      { name: 'Git', level: 90, description: '熟悉Git工作流，代码版本控制' },
      { name: 'Docker', level: 80, description: '容器化部署和开发环境搭建' },
      { name: 'Webpack', level: 85, description: '构建工具配置与性能优化' }
    ]
  },
  {
    name: '数据库与云服务',
    items: [
      { name: 'MySQL', level: 82, description: '数据库设计与查询优化' },
      { name: 'MongoDB', level: 80, description: 'NoSQL数据库操作与聚合管道' },
      { name: 'AWS', level: 75, description: '云服务部署与CDN配置' },
      { name: 'Redis', level: 78, description: '缓存策略与消息队列' }
    ]
  }
]

const techTags = [
  { name: 'Vue', size: 2.5 },
  { name: 'React', size: 2.3 },
  { name: 'TypeScript', size: 2.0 },
  { name: 'JavaScript', size: 2.2 },
  { name: 'Node.js', size: 1.8 },
  { name: 'CSS3', size: 2.0 },
  { name: 'HTML5', size: 2.0 },
  { name: 'Git', size: 1.6 },
  { name: 'Docker', size: 1.5 },
  { name: 'Webpack', size: 1.4 },
  { name: 'Vite', size: 1.5 },
  { name: 'Sass', size: 1.6 },
  { name: 'Tailwind', size: 1.4 },
  { name: 'Express', size: 1.3 },
  { name: 'MongoDB', size: 1.3 },
  { name: 'MySQL', size: 1.4 }
]

const showSkillDetail = (skill) => {
  activeSkill.value = skill
}

const hideSkillDetail = () => {
  activeSkill.value = null
}

const animateSkillLevels = async () => {
  await nextTick()

  setTimeout(() => {
    skillCategories.forEach(category => {
      category.items.forEach(skill => {
        let current = 0
        const target = skill.level
        const increment = target / 50

        const timer = setInterval(() => {
          current += increment
          if (current >= target) {
            current = target
            clearInterval(timer)
          }
          animatedLevels[skill.name] = Math.floor(current)
        }, 20)
      })
    })
  }, 500)
}

onMounted(() => {
  animateSkillLevels()
})
</script>

<style scoped>
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.skill-card {
  animation: slideInUp 0.6s ease-out both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skill-card-title {
  font-size: 1.3rem;
  color: var(--accent-blue);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skill-card-title::before {
  content: '<';
  color: var(--accent-purple);
  font-family: 'JetBrains Mono', monospace;
}

.skill-items {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.skill-item {
  position: relative;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s;
}

.skill-item:hover {
  background: rgba(0, 217, 255, 0.05);
}

.skill-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.skill-name {
  color: var(--text-primary);
  font-weight: 600;
}

.skill-level {
  color: var(--accent-blue);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
}

.skill-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
  border-radius: 4px;
  transition: width 0.5s ease-out;
  position: relative;
  overflow: hidden;
}

.skill-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.skill-detail {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card);
  border: 1px solid var(--accent-blue);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  width: 250px;
  z-index: 10;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
  font-size: 0.85rem;
  line-height: 1.5;
}

.tech-cloud-section {
  animation: slideInUp 0.6s ease-out both;
}

.tech-cloud-title {
  font-size: 1.3rem;
  color: var(--accent-blue);
  margin-bottom: 1.5rem;
  text-align: center;
}

.tech-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  padding: 1rem 0;
}

.tech-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(0, 217, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--accent-blue);
  font-weight: 600;
  cursor: default;
  transition: all 0.3s;
  animation: fadeIn 0.5s ease-out both;
}

.tech-tag:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: var(--accent-blue);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.4);
}

@media (max-width: 768px) {
  .skill-detail {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 1rem;
  }
}
</style>
